<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="utf-8" />
	<title>ECharts</title>
	<!-- 引入刚刚下载的 ECharts 文件 -->
	<script type="text/javascript" th:src="@{/static/echarts.min.js}"></script>
	<script type="text/javascript" th:src="@{/static/jquery-2.1.4.js}"></script>
	<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
	<script type="text/javascript" th:src="@{/static/mylayer.js}"></script>
</head>
<body>
	<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
	<div id="main1" style="width: 600px;height:400px;"></div>
	<div id="main2" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart1 = echarts.init(document.getElementById('main1'));
		var myChart2 = echarts.init(document.getElementById('main2'));

		$.post(
			'/echarts/blogCount',
			function (result) {
				console.log(result.data);
				var list = result.data;
				// [{name: 'Java', value: 8},{name: 'UI', value: 3}]
				var xArray = new Array();
				var yArray = new Array();
				$(list).each(function (){
					// this: {name: 'Java', value: 8}
					xArray.push(this.name);
					yArray.push(this.value);
				})
				// 指定图表的配置项和数据
				var option1 = {
					title: {
						text: '博客分类数量统计'
					},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: xArray
					},
					yAxis: {},
					series: [
						{
							name: '销量',
							type: 'bar',
							data: yArray
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart1.setOption(option1);

				//-------------------------
				//饼状图
				var option2 = {
					title: {
						text: '',
						subtext: '',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [
						{
							name: 'Access From',
							type: 'pie',
							radius: '50%',
							data: list,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};
				myChart2.setOption(option2);

			},
			'json'
		);



	</script>
</body>
</html>